<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        canvas.oldcanvas{
/*            margin-top: 20px;*/
            border: 1px solid red;
            float: left;
        }
        canvas.newCanvas{
/*            margin-top: 20px;*/
            border: 1px solid #ec4bff;
            float: left;
        }

        .cutBox{
            width: 200px;
            height: 200px;
            border: 2px solid #ff960d;
            position: absolute;
            top:0;
            left:0;
/*            display: none;*/
        }
        .imgBox{
            position: relative;
            margin-top: 30px;
       /*     padding: 20px;*/
            border: 1px solid black;
        }
        .imgBox  img{
            width: 600px;
            height: 400px;
            display: none;
        }
        .clear::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>

    <button onclick="lineDraw()">画直线</button>
    <button onclick="jxDraw()">画矩形</button>
    <button onclick="roundDraw()">画圆</button>
    <button onclick="imgDraw()">画图</button><br>
    上传头像<input type="file" class="uploadCutImg"><button onclick="subtouxiang()">提交</button><span class="upTips"></span>
    <div class="imgBox clear">
        <canvas width="600" height="400" class="oldcanvas"></canvas>
        <img class="yulan" src="" alt="">
        <div class="cutBox"></div>
        <canvas class="newCanvas" width="200" height="200"></canvas>
    </div>


    <!--手机短信验证码-->

    <!--
    用户业务流程：1、
    开发流程：发送验证码，拦截，请求短信服务器，
    调用第三方的服务：npm install leancloud-storage -s
                     引入。
                     配置：
                     sms.init({
                        appId:,
                        appkey:'',
                        serverURLs:'',

                     })
    -->
  <!--  <input type="text">-->
    <script src="Jquery/JQuery.js"></script>
    <script>
        let ctx=$('canvas')[0].getContext('2d')
        let newCtx=$('canvas')[1].getContext('2d')
        let img=$('.imgBox>img')[0]
        let box=$('.imgBox')[0]
function lineDraw() {
        //画直线。
        ctx.beginPath()
        ctx.lineWidth=20;
        ctx.lineCap='round';
        ctx.strokeStyle='pink';
        ctx.moveTo(20,30)
    ctx.lineTo(100,80)
    ctx.lineTo(200,40)
    ctx.lineTo(300,200)
    ctx.stroke()//结束
}
function jxDraw() {
    ctx.beginPath()
    ctx.strokeStyle='red'
    ctx.fillStyle='#ffe351'
    ctx.lineWidth=2;
//空心 （x,y,宽，高）
    ctx.strokeRect(100,200,100,100)
    //填充（x,y,宽，高）
/*    ctx.fillRect(50,200,200,100)*/

}

function roundDraw() {
    ctx.beginPath()
    ctx.lineWidth=2
    ctx.fillStyle='pink'
    ctx.strokeStyle='red'
    // ctx.arc(圆心x,圆心Y,半径,起始角度(3点钟位置是0度),结束角度N π,布尔值false顺时针，true逆时针)
ctx.arc(100,100,50,0,.5*Math.PI,false)
        ctx.stroke()
        ctx.fill()
        }
function imgDraw() {
    //

    console.log(img)

    //图片节点，左上角x,左上角Y
    // ctx.drawImage(img,100,100)
    //图片节点，左上角x,左上角Y，画出来的图的宽，高
/*    ctx.drawImage(img,100,100,300,100)*/
    //剪切
    // ctx.drawImage(图片节点，剪切起点X，起点Y,剪切宽度，剪切高度，画出来的图的起点X，起点Y，宽，高)
    ctx.drawImage(img,0,0,200,200,100,20,300,300)

        }

        //将截取的图上传到服务器
$('.uploadCutImg').change(function () {
    //1/选择的图片全图预览到画布。
    //重置画布。
/*    img.src=''
 */
    let imgFile=this.files[0]

    let reader=new FileReader()

    reader.readAsDataURL(imgFile)
    reader.onload=function(){
            //显示到画布

        let url=this.result
        img.src=url
        img.onload=function(){
            ctx.drawImage(img,0,0,600,400)
            //显示cutbox初始位置0,0需要等图片加载完在执行否则可能会渲染不出来

        }


    }


// 2/拖动cutbox,
    //3、将cutbox区域的图片显示到新的画布里。
    //4、把新画布的图片数据上传到后台。


})


        // 2/拖动cutbox,添加点击事件，获取鼠标落入的点位置，添加移动事件，设置cutBox的位置
        $('.cutBox').mousedown(function (e) {
            //父元素有相对定位，不能直接使用offset
            let cutDownX=parseInt( $(this).css('left'))
            let cutDownY=parseInt( $(this).css('top'))
            let mdownX=e.clientX
            let mdowny=e.clientY
            $('.cutBox').mousemove(function (e) {
                    let moveX=e.clientX

                    let moveY=e.clientY
                $('.cutBox')[0].style.left=moveX-mdownX+cutDownX+'px'
                $('.cutBox')[0].style.top=moveY-mdowny+cutDownY+'px'
                //  //将cutbox获取到的区域内的图片裁剪预览到新画布

            })


        })
//   //3、将cutbox区域的图片显示到新的画布里。

        $('.cutBox').mouseup(function () {
                $('.cutBox').off('mousemove')
            let drawX=parseInt( $(this).css('left'))
            let drawY=parseInt( $(this).css('top'))
            //获取选中区域的图片数据
            let imgCutData=ctx.getImageData(drawX,drawY,200,200)
            //渲染到新画布
            newCtx.putImageData(imgCutData,0,0)
        })

        //4、点击上传把新画布的图片数据上传到后台。
       function subtouxiang() {
           console.log(11111111111)
          let   imgCutData=$('.newCanvas')[0].toDataURL()
            $.ajax({
                url:'/upCutImg',
                method:'post',
                data:{imgCutData},
                success(data){
                    //提交成功后提示成功
                    //清空预览
                    if (data.code===200){
                        $('.upTips').text(`${data.msg}`)
                        //清空画布?怎么清空
                        clearCanvas()

                    }
                }
            })
       }
       function clearCanvas() {

           ctx.fillStyle="#ffffff";
           ctx.beginPath();
           ctx.fillRect(0,0,ctx.width,ctx.height);
           ctx.closePath();
       }
    </script>
</body>
</html>